<template>
  <div class="container">
    <div class="row">
      <div v-for='column in columnList' :key='column.id' class="col-3 mb-4">
        <div class="card h-10 shadow-sm text-center">
          <div class="card-body">
            <img class="avatar-img-size rounded-circle" :alt="column.title" :src='column.avatar' />
            <h5>{{ column.title }}</h5>
            <p style="overflow:hidden">{{ column.content }}</p>
            <router-link :to="`/column/${column.id}`" class="btn btn-outline-primary">进入专栏</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'ColumnList',
  props: {
    list: {
      // PropType 将普通类型转化为PropType类型，构造函数断言成类型
      type: Array as PropType<ColunmProp[]>,
      require: true,
      default: []
    }
  },
  setup (props) {
    const columnList = computed(() => {
      return props.list.map((column: ColunmProp) => {
        if (!column.avatar) {
          column.avatar = require('@/static/imgs/pic2.jpeg')
        }
        return column
      })
    })

    return {
      columnList
    }
  }
})
</script>

<style scoped>
.avatar-img-size {
  width: 100px;
  height: 200px;
}
</style>
